﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="Overview">
    <h2><DemoNavLink Link="SpinEdit#Overview" />Spin Edit - Overview</h2>
    <p>
        <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSpinEdit-1">Spin Edit</a> displays a numeric value and allows the user to modify it, either by typing a new value into the text box, or by using the up/down spin buttons to increment/decrement the value.
    </p>
    <p>
        Spin Edit works with .NET built-in data types, including System.Decimal.
        The editor processes values directly on the server side, without changing to or from JavaScript number types.
        This ensures that values entered by the user never lose precision because of possible type conversions.
    </p>
    <p>
        The Spin Edit component supports different size modes. To specify the component's size in code, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxResizableEditorBase-2.SizeMode">SizeMode</a> property. To apply different size modes, use the drop-down list in the demo card's header.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                Value: <b>@DecimalValue</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-body mw-480">
        <DxSpinEdit @bind-Value="@DecimalValue" SizeMode="@SizeMode"></DxSpinEdit>
    </div>
</div>

<CodeSnippet_Editor_SpinEdit/>

@code {
    Decimal DecimalValue { get; set; } = 15;
}
